import { defineComponent, computed, inject, ref } from "vue"
import deepcopy from "deepcopy";
import { events } from '../utils/events.js';

import PropsContainer from "./propContainer/index.vue";
import MenuContainer from "./menuContainer/index.vue";
import PageList from "./pageContainer/list.vue";
import ActionBar from './pageContainer/actionBar.jsx';

import { contentRef } from './contentContainer/content.js';
import { editListDragHandle } from './contentContainer/editListDragHandle.js';

import './contentContainer/index.scss';
import './pageContainer/index.scss';
import './propContainer/index.scss';

export default defineComponent({
    props: {
        modelValue: {
            type: Object,
            default: () => {}
        }
    },
    emit: ["update:modelValue"],
    setup(props, ctx) {
        let data = computed({
            get() { return props.modelValue; },
            set(value) {
                ctx.emit("update:modelValue", deepcopy(value));
                localStorage.setItem("data", JSON.stringify(value))
            }
        })
        const config = inject("config")

        const { dragstart, dragend, clickComponent, focusIndex } = editListDragHandle(contentRef, data);

        events.on('props', () => localStorage.setItem("data", JSON.stringify(data.value)))

        return () => {
            return (
                <main class="main_container">
                    <div class="page_container">
                        <PageList />
                        <ActionBar v-model={data.value} focusIndex={focusIndex} />
                    </div>

                    <MenuContainer v-model={data.value} />

                    <PropsContainer v-model={data.value} focusIndex={focusIndex} />

                    <div
                        ref={contentRef}
                        class={[
                            "content_container",
                        ]}
                    >
                        {
                            data.value.map((item, index)=>{
                                return <div
                                    ref={(itemDom) => {
                                        data.value[index] && (data.value[index].dom = itemDom?.getBoundingClientRect())
                                        // data.value[index].domRef = itemDom
                                        // console.log(data.value)
                                    }}
                                    key={item.id}
                                    class={["content_item", (item.focus) ? "content_item_focus" : ""]}
                                    onClick={() => clickComponent(item, index)}
                                    draggable={item.focus}
                                    onDragstart={e => dragstart(e, item, index)}
                                    onDragend={e => dragend(e)}
                                >
                                    {config.componentMap[item.key].render({
                                        props: item.props ? item.props : {}
                                    })}
                                </div>
                            })
                        }
                    </div>
                </main>
            )
        }
    }
})